<dom-module id="ve-color">
    <style>
         :host {
            display: flex;
            position: relative;
            box-sizing: border-box;
            min-width: 60px;
            min-height: 24px;
            border: 1px solid #666;
            cursor: default;
            background: #232323
        }
        
        .border {
            position: relative;
            border: 1px solid #000;
            width: 100%
        }
        
        .rgb-wrapper {
            position: relative;
            height: 17px
        }
        
        #iconDown {
            font-size: 10px;
            position: absolute;
            right: 5px;
            bottom: 2px;
            color: #000
        }
        
        #previewRGB {
            height: 17px;
            cursor: pointer
        }
        
        #alpha {
            width: 100%;
            height: 3px;
            background-color: #fff
        }
        
         :host[focused] {
            border: 1px solid #0c70a6
        }
        
        .mask {
            display: none;
            opacity: .5
        }
    </style>
    <template>
        <input id="color" style="width:100%;" />
    </template>
    <script>
        (() => {
            "use strict";
            Polymer({
                properties: {
                    value: {
                        type: Object,
                        value: function() {
                            return {
                                r: 255,
                                g: 255,
                                b: 255,
                                a: 255
                            }
                        },
                        notify: true,
                        observer: '_valueChanged',
                    },
                },

                convertToSpectrumColor: function() {
                    return tinycolor({
                        r: this.value.r,
                        g: this.value.g,
                        b: this.value.b,
                        a: this.value.a / 255,
                        format: "hex3",
                    })
                },

                colorToLocal: function(color) {
                    return {
                        r: fixFloatValue(color._r, 0),
                        g: fixFloatValue(color._g, 0),
                        b: fixFloatValue(color._b, 0),
                        a: fixFloatValue(color._a * 255, 0),
                    }
                },

                ready: function() {
                    this.isReady = true;
                    let self = this;

                    function __setColor(color) {
                        self.inputValue = self.colorToLocal(color);
                        self.value = self.colorToLocal(color);
                        self.async(function() {
                            self.fire("end-editing");
                        }, 1);
                    };

                    let localStorageKey = "theme.colors";
                    try {
                        window.localStorage
                    } catch (e) {
                        localStorageKey = undefined
                    }

                    $(this.$.color).spectrum({
                        color: this.convertToSpectrumColor(),
                        showAlpha: true,
                        showPalette: true,
                        showInput: true,
                        showInitial: true,
                        allowEmpty: true,
                        clickoutFiresChange: true,
                        palette: [
                            ["#000", "#444", "#666", "#999", "#ccc", "#eee", "#f3f3f3", "#fff"],
                            ["#f00", "#f90", "#ff0", "#0f0", "#0ff", "#00f", "#90f", "#f0f"],
                            ["#f4cccc", "#fce5cd", "#fff2cc", "#d9ead3", "#d0e0e3", "#cfe2f3", "#d9d2e9", "#ead1dc"],
                            ["#ea9999", "#f9cb9c", "#ffe599", "#b6d7a8", "#a2c4c9", "#9fc5e8", "#b4a7d6", "#d5a6bd"],
                            ["#e06666", "#f6b26b", "#ffd966", "#93c47d", "#76a5af", "#6fa8dc", "#8e7cc3", "#c27ba0"],
                            ["#c00", "#e69138", "#f1c232", "#6aa84f", "#45818e", "#3d85c6", "#674ea7", "#a64d79"],
                            ["#900", "#b45f06", "#bf9000", "#38761d", "#134f5c", "#0b5394", "#351c75", "#741b47"],
                            ["#600", "#783f04", "#7f6000", "#274e13", "#0c343d", "#073763", "#20124d", "#4c1130"]
                        ],
                        selectionPalette: [],
                        maxSelectionSize: 8,
                        preferredFormat: 'hex3',
                        localStorageKey: localStorageKey,
                        change: __setColor,
                        move: function(color) {},
                        hide: __setColor
                    });
                },

                _valueChanged() {
                    if (!this.isReady) {
                        return;
                    }
                    if (this.inputValue && this.inputValue.r == this.value.r && this.inputValue.g == this.value.g && this.inputValue.b == this.value.b && this.inputValue.a == this.value.a) {
                        return;
                    }

                    $(this.$.color).spectrum("set", this.convertToSpectrumColor());

                    this.inputValue = this.value;
                },
            })
        })();
    </script>
</dom-module>